<template>
	<view>
		<view class="top">
			<navigation :titles="titles" @setItem="ItemSetFunc"></navigation>
			<view class="IWanna-write-noshow" @click="backToMyLetter"></view>
		</view>

		<!-- 我的报名内容 -->
		<view v-show="getTitle0()">
			<scroll-view scroll-y="true">
				<view class="order-new-Info-List" v-for="(item,index) in mysign_List" :key="item.id">
					<view class="order-new-Info-view" hover-class="order-new-Info-view_hover" @click="goto2(item,'sign')">
						<view class="order-new-Info-left">
							<!-- 活动图片 -->
							<img :src="item.img" />
							<!-- <image v-bind:src="item.img"></image> -->
							<!-- <text>{{index + 1}}</text> -->
						</view>
						<view class="order-new-Info-middle">
							<!-- 是否开始状态 -->
							<view class="order-new-Info-line1">
								<view class="order-new-Info-state">
									{{item.state}}
								</view>
							</view>
							<view class="order-new-Info-line2">
								<view class="order-new-Info-Brief">
									<text>{{item.brief}}</text><!-- 问题简述 -->
								</view>
							</view>
							<view class="order-new-Info-line3">
								<view class="order-new-Info-People">
									<!-- 位置图标 -->
									<image src="http://p1362.bvimg.com/10465/2202ce3cd3326abb.png"></image>
									{{item.place}}
								</view>
								<view class="order-new-Info-Place">
									<!-- 人员图标 -->
									<image src="http://p1362.bvimg.com/10465/aec6207b3ee7a169.png"></image>
									{{item.number_signup}}/{{item.number_need}}<!-- 地点 -->
								</view>
							</view>
						</view>
					</view>
					<view class="cross-line"></view>
				</view>
			</scroll-view>
		</view>

		<!-- 我的发布内容 -->
		<view class="IWanna-write" v-show="getTitle1()">
			<view class="IWanna-write-myLetter">
				<scroll-view scroll-y="true"> 
					<view class="order-new-Info-List" v-for="(item,index) in myrelease_List" :key="item.id">
						<view class="order-new-Info-view" hover-class="order-new-Info-view_hover" @click="goto2(item,'release')">
							<view class="order-new-Info-left">
								<!-- 活动图片 -->
								<img :src="item.img" />
								<!-- <image v-bind:src="item.img"></image> -->
								<!-- <text>{{index + 1}}</text> -->
							</view>
							<view class="order-new-Info-middle">
								<!-- 是否开始状态 -->
								<view class="order-new-Info-line1">
									<view class="order-new-Info-state">
										{{item.state}}
									</view>
								</view>
								<view class="order-new-Info-line2">
									<view class="order-new-Info-Brief">
										<text>{{item.brief}}</text><!-- 问题简述 -->
									</view>
								</view>
								<view class="order-new-Info-line3">
									<view class="order-new-Info-People">
										<!-- 位置图标 -->
										<image src="http://p1362.bvimg.com/10465/2202ce3cd3326abb.png"></image>
										{{item.place}}
									</view>
									<view class="order-new-Info-Place">
										<!-- 人员图标 -->
										<image src="http://p1362.bvimg.com/10465/aec6207b3ee7a169.png"></image>
										{{item.number_signup}}/{{item.number_need}}<!-- 地点 -->
									</view>
								</view>
							</view>
						</view>
						<view class="cross-line"></view>
					</view>
				</scroll-view>

				<!-- 写信按钮 -->
				<view class="IWanna-write-myLetter-click back-img" @click="clickMail">
					<!-- <text class="iconfont icon-shuxin"></text> -->
					<view class="IWanna-write-myLetter-click-text back-img-text"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from '@/component/policyInterpretation/navigation/navigation.vue'
	import information from '@/component/policyInterpretation/information/information.vue'
	import MyLetter from '@/component/policyInterpretation/information/information_noLike.vue'
	export default {
		components: {
			navigation,
			information,
			MyLetter
		},
		onShow() {
			let news = uni.getStorageSync('news');

		},

		data() {
			return {
				titles: [{
						id: 0,
						name: "我的报名",
						isActive: true
					},
					{
						id: 1,
						name: "我的发布",
						isActive: false
					}
				],
				mysign_List: [{
						id: 0,
						state: "", //活动状态
						startdate: "2021/12/2", //开始日期
						starttime: "10:26", //开始时间
						enddate: "2021/12/10", //结束日期
						endtime: "10:26", //结束时间
						brief: "12月垃圾分类回收志愿活动",
						place: "村北垃圾回收站",
						number_need: 8, //需求人数
						number_signup: 6, //报名人数
						img: "http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png", //活动图片
						iniciator: "马晓峰", //发起者
						content: "城市生活垃圾分类收集工作是实施垃圾减量化、资源化、无害化的一个十分重要的步骤，对于改善人民环境，实现城市的可持续发展，创建节约型社会具有重要意义。城市生活垃圾分类收集，不仅关系到城市的文明程度和城市形象，也是城市生态环境建设最基础的工作，更是一项利国利民的事业。"
					},
					{
						id: 1,
						state: "", //活动状态
						startdate: "2021/12/2", //开始日期
						starttime: "10:26", //开始时间
						enddate: "2021/12/10", //结束日期
						endtime: "10:26", //结束时间
						brief: "12月垃圾分类回收志愿活动",
						place: "村北垃圾回收站",
						number_need: 8, //需求人数
						number_signup: 6, //报名人数
						img: "http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png", //活动图片
						iniciator: "马晓峰", //发起者
						content: "城市生活垃圾分类收集工作是实施垃圾减量化、资源化、无害化的一个十分重要的步骤，对于改善人民环境，实现城市的可持续发展，创建节约型社会具有重要意义。城市生活垃圾分类收集，不仅关系到城市的文明程度和城市形象，也是城市生态环境建设最基础的工作，更是一项利国利民的事业。"
					},
					{
						id: 2,
						state: "", //活动状态
						startdate: "2021/12/2", //开始日期
						starttime: "10:26", //开始时间
						enddate: "2021/12/10", //结束日期
						endtime: "10:26", //结束时间
						brief: "12月垃圾分类回收志愿活动",
						place: "村北垃圾回收站",
						number_need: 8, //需求人数
						number_signup: 6, //报名人数
						img: "http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png", //活动图片
						iniciator: "马晓峰", //发起者
						content: "城市生活垃圾分类收集工作是实施垃圾减量化、资源化、无害化的一个十分重要的步骤，对于改善人民环境，实现城市的可持续发展，创建节约型社会具有重要意义。城市生活垃圾分类收集，不仅关系到城市的文明程度和城市形象，也是城市生态环境建设最基础的工作，更是一项利国利民的事业。"
					}
				],
				myrelease_List: [{
					id: 0,
					state: "", //活动状态
					startdate: "2021/12/2", //开始日期
					starttime: "10:26", //开始时间
					enddate: "2021/12/10", //结束日期
					endtime: "10:26", //结束时间
					brief: "12月垃圾分类回收志愿活动",
					place: "村北垃圾回收站",
					number_need: 8, //需求人数
					number_signup: 6, //报名人数
					img: "http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png", //活动图片
					iniciator: "马晓峰", //发起者
					content: "城市生活垃圾分类收集工作是实施垃圾减量化、资源化、无害化的一个十分重要的步骤，对于改善人民环境，实现城市的可持续发展，创建节约型社会具有重要意义。城市生活垃圾分类收集，不仅关系到城市的文明程度和城市形象，也是城市生态环境建设最基础的工作，更是一项利国利民的事业。"
				}]
			}
		},
		methods: {
			ItemSetFunc(index) {
				for (var i = 0; i < this.titles.length; ++i) {
					this.titles[i].isActive = false;
				}
				this.titles[index].isActive = true;
			},
			getTitle0() {
				return this.titles[0].isActive;
			},
			getTitle1() {
				return this.titles[1].isActive;
			},
			// 点击我要发布按钮
			clickMail() {
				console.log(111);
				uni.navigateTo({
					url: 'cooperationWrite'
				});
			},
			goto2(e,flag) {
				uni.navigateTo({
					url: '../cooperationIndex/cooperationDetail?activity=' + encodeURIComponent(JSON.stringify(e)) + '&flag=' + flag
				})
			}
		}
	}
</script>

<style>
	/* @import url("../../../common/iconfont.css"); */
	/* @import url("../../../common/common_layout.css"); */


	.back-img {
		background-image: url(http://p1362.bvimg.com/10465/527328b4e90f6f9b.png);
		background-position: 40rpx -0rpx;
		background-size: 120rpx;
		background-repeat: no-repeat;
		/* box-shadow: 0rpx 10rpx 30rpx #dcdddc; */
	}

	.back-img-text {
		display: block;
		margin-top: 120rpx !important;
	}

	.cross-line {
		margin: 10rpx 20rpx;
		height: 2rpx;
		background: #DCDDDC;
	}

	page {
		background: #fcfcfc;
	}


	.IWanna-write-letter {
		margin: 10rpx 30rpx 10rpx 30rpx;
	}

	.IWanna-write-myLetter-click {
		width: 200rpx;
		height: 200rpx;
		position: fixed;
		right: 6px;
		bottom: 30px;
		display: flex;
		flex-direction: column;
		justify-items: center;
		align-items: center;
	}

	.IWanna-write-myLetter-click text {
		font-size: 80rpx;
		font-weight: 600;
		color: #ea9400;
	}

	.IWanna-write-myLetter-click-text {
		margin-top: 6rpx;
		font-size: 28rpx;
		color: #737473;
	}

	.order-new-Info-List {
		align-items: center;
	}

	.order-new-Info-view {
		width: 96%;
		height: 25vw;
		display: flex;
		margin-top: 3vw;
		background-color: #fefaf3;
		margin-left: 2%;

	}

	.order-new-Info-view_hover {
		background-color: #FEF0D2;
	}

	.repair-content-box {
		height: 100vw;
		background-size: 100% 100%;
		margin-left: 3vw;
		margin-right: 3vw;
		margin-top: 3vw;

	}

	.repair-new-title-box {
		margin-top: 5vw;
		margin-left: 5vw;
		margin-right: 5vw;
	}

	.cross-line {
		height: 0.5vw;
		width: 96%;
		background-color: #f0d6ab;
		margin-left: 2%;
	}

	// 工单图标
	.order-new-Info-left {
		width: 40%;
		align-items: center;
	}

	.order-new-Info-left img {
		height: 92%;
		width: 92%;
		padding-top: 4%;
		padding-left: 4%;
	}

	.order-new-Info-middle {
		width: 100%;
	}

	.order-new-Info-line1 {
		display: flex;
		height: 5.5vw;
		width: 100%;
	}


	.order-new-Info-state {
		width: 98%;
		font-size: medium;
		font-weight: bold;
		color: #FEBD62;
		text-align: right;
	}

	.order-new-Info-line2 {
		height: 8vw;
		font-size: larger;
		font-weight: bold;
		color: #575757;
		align-items: center;
	}

	.order-new-Info-line3 {
		display: flex;
		height: 5.5vw;
		width: 100%;
		margin-top: 35rpx;
	}

	.order-new-Info-People {
		width: 50%;
		color: #808080;
		font-size: small;
		display: flex;
	}

	.order-new-Info-People image {
		width: 40rpx;
		height: 40rpx;
	}

	.order-new-Info-Place {
		width: 50%;
		color: #808080;
		font-size: small;
		display: flex;
	}

	.order-new-Info-Place image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
	}
</style>
